<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>实现常见的技术产品官网的页面架构及样式布局</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>

	<header>
		<h1>新世界</h1>
		<nav>
			<ul>
				<li><a href="">首页</a></li>
				<li><a href="">最新活动</a></li>
				<li><a href="">项目介绍</a></li>
				<li><a href="">爱心社区</a></li>
				<li><a href="">关于我们</a></li>
				<li><a href="">登录</a></li>
			</ul>
		</nav>
	</header>

	<section class="section1">
		<div>
			<h2>Time of new life</h2>
			<p>新时代，年轻的人们让我们一起<br>
				体验新生活，享受新生活</p>
			<button>开始体验</button>
		</div>
		<div class="introdution">
			<figure>
				<div><img src="img/sign-1.png" alt=""></div>
				<figcaption>打造全新世界观，让你更爱你的生活</figcaption>
			</figure>
			<figure>
				<div><img src="img/sign-2.png" alt=""></div>
				<figcaption>丰富多彩的公益活动，发挥新世界的主人公意识</figcaption>
			</figure>
			<figure>
				<div><img src="img/sign-3.png" alt=""></div>
				<figcaption>时尚的心理念，超强体验未知的生活</figcaption>
			</figure>
			<figure>
				<div><img src="img/sign-4.png" alt=""></div>
				<figcaption>完善的培养机制，培养你全新的世界观</figcaption>
			</figure>
		</div>
	</section>

	<section class="section2">
		<div>
			<div class="pic"><img src="img/logo.png"></div>
			<div class="text">关于新世界，你不知道的还有什么？</div>
		</div>
		<div class="map">
			<img src="img/map.png" alt="">
			<div class="search">
				<h1>查找新世界城市活动信息</h1>
				<hr>
				<p>每个城市的有不同的活动信息，请自助查询您所需要了解的城市</p>
				<div class="input-group">
					<div class="input-group-item">
						<input type="text" name="country" placeholder="国家">
						<span class="iconfont icon-iconfontxiao"></span>
						<input type="radio">
						<ul>
							<li><a href="#">中国</a></li>
							<li><a href="#">美国</a></li>
							<li><a href="#">日本</a></li>
							<li><a href="#">俄罗斯</a></li>
							<li><a href="#">韩国</a></li>
						</ul>
					</div>
				</div>
				<div class="input-group">
					<div class="input-group-item">
						<input type="text" name="country" placeholder="省份">
						<span class="iconfont icon-iconfontxiao"></span>
						<input type="radio">
						<ul>
							<li><a href="#">山东</a></li>
							<li><a href="#">湖南</a></li>
							<li><a href="#">广州</a></li>
							<li><a href="#">上海</a></li>
							<li><a href="#">浙江</a></li>
						</ul>
					</div>
				</div>
				<div class="input-group">
					<div class="input-group-item">
						<input type="text" name="country" placeholder="城市">
						<span class="iconfont icon-iconfontxiao"></span>
						<input type="radio">
						<ul>
							<li><a href="#">聊城</a></li>
							<li><a href="#">济南</a></li>
							<li><a href="#">青岛</a></li>
							<li><a href="#">烟台</a></li>
							<li><a href="#">菏泽</a></li>
						</ul>
					</div>
				</div>
				<div class="input-group">
					<div class="input-group-item">
						<input type="button" value="搜&nbsp;&nbsp;&nbsp;&nbsp;索">
					</div>
				</div>
			</div>
		</div>
		<div class="mural">
			<figure>
				<img src="img/mural-1.png" alt="壁画1">
				<figcaption>
					<h2>北京活动</h2>
					<p>新社区大联盟</p>
				</figcaption>
			</figure>
			<figure>
				<figcaption class="important">
					<h2>上海活动</h2>
					<p>夜上海景观探索</p>
				</figcaption>
				<img src="img/mural-2.png" alt="壁画2">
			</figure>
			<figure>
				<img src="img/mural-3.png" alt="壁画3">
				<figcaption>
					<h2>深圳活动</h2>
					<p>全新海岸线观点站</p>
				</figcaption>
			</figure>
			<figure>
				<img src="img/mural-4.png" alt="壁画4">
				<figcaption>
					<h2>香港活动</h2>
					<p>奢侈消费大派送</p>
				</figcaption>
			</figure>
		</div>
	</section>


	<section class="section3">
		<div>
			<div class="leg-right">
				<h2>新世界/<small>01</small></h2>
				<div class="text">新世界是个新世界新世界是个新世界新个新世界新世界是个新世界新世界是个新世界新世界是个新世界新个新世界新世界是个新世界新世界是个新世界新个新世界新世界是个新世界新世界是个新世界新个新世界新世界是个新世界新世界是</div>
				<a href="javascript:return void(0);">更多信息</a>
				<div class="point">
					<span class="span-active"></span>
					<span></span>
					<span></span>
				</div>
			</div>
			<div class="leg">
				<img src="img/leg.png" alt="大长腿">
				<div class="leg-above">
					<h2>新世界</h2>
					<h3>TIME</h3>
					<p>@新世界 - 北京</p>
					<p>2016.04.01</p>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="row-1">
				<p>新时代</p>
				<p>关于爱生活的我们</p>
				<hr>
				<p>查看更多</p>
			</div>
			<div class="row-2">
				<p>新时代</p>
				<p>关于爱生活的我们</p>
				<hr>
				<p>查看更多</p>
			</div>
			<div class="row-3"></div>
		</div>
		<div class="row2">
			<h2>成为我们的志愿者</h2>
			<hr>
			<p>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情</p>
			<p>那就不要犹豫，快来加入我们，成为改变所有人生活的人</p>
		</div>
		<div class="row3">
			<div class="row3-1">
				<h2>新世界志愿者协议</h2>
				<p>加入新世界志愿者的人员必须遵守中华人民共和国的相关法律法规，并且本着平等资源的原则......</p>
				<span class="iconfont icon-iconfontxiao">more</span>
				<h2>新世界志愿者权利</h2>
				<p>新世界志愿者享受新世界内部所有内部自愿的权利，并且享受所在新世界活动的优先参与资格</p>
				<span class="iconfont icon-iconfontxiao">more</span>
				<h2>更多条款</h2>
				<span class="iconfont icon-iconfontxiao">more</span>
			</div>
			<div class="row3-2">
				<form action="#">
					<div class="input-group">
						<input type="text" name='userAge' placeholder="年龄：">
						<input type="text" name='userName' placeholder="姓名：">
					</div>
					<div class="input-group">
						<input type="text" name='userAdress' placeholder="联系地址：">
						<input type="text" name='userTel' placeholder="联系方式：">
					</div>
					<div class="input-group">
						<textarea placeholder="请简单描述你想要的生活："></textarea>
					</div>
					<div class="input-group">
						<input type="button" value="提交申请">
					</div>
				</form>
			</div>
		</div>
	</section>

	<footer>
		<h3>联系我们</h3>
		<p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯，也可以通过以下任何方式关注我们的动态</p>
		<div class="input-group">
			<input type="text" placeholder="someone@email.com"><input type="submit" value="提交">
		</div>
		<ul>
			<li class="iconfont">&#xe601;</li>
			<li class="iconfont">&#xe60e;</li>
			<li class="iconfont">&#xe6b2;</li>
			<li class="iconfont">&#xe6f3;</li>
		</ul>
		<div>
			<a href="#">Back to top</a>
			<span>@2016新世界</span>
		</div>
	</footer>
	
</body>
</html>